<template>
    <!-- 客户管理-NotePad页面 -->
    <div class="fillcontain" id="selectXillComponent"> 
        <div class="select-main">
            <div class="queryDiv"><el-button type="danger" plain @click="goQueryIll">模糊查询</el-button></div>
                 
                <el-tabs type="border-card">
                  <el-tab-pane label="伤病">
                    <el-tree :data="treeData"
                     :props="defaultProps"
                      highlight-current="true"
                      >
                    <span slot-scope="{node, data}">
                        <span @dblclick="clkDb(node,data)">{{data.xillcode}}&nbsp;&nbsp;{{data.xillname}}</span>
                    </span>
                    </el-tree>
                  </el-tab-pane>
                  <el-tab-pane label="伤残">
                    <el-tree :data="treeData_disability"
                     :props="defaultProps"
                      highlight-current="true"
                      >
                    <span slot-scope="{node, data}">
                        <span @dblclick="clkDb(node,data)">{{data.xillcode}}&nbsp;&nbsp;{{data.xillname}}</span>
                    </span>
                    </el-tree>
                  </el-tab-pane>
                </el-tabs>
        </div>

        <el-dialog title="国际伤病代码模糊查询" :visible.sync="queryIllVisible" width="900px" center  append-to-body>
            <div class="select-main">
                <el-form :model="searchIllParams" label-width="100px" class="search_container">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="伤病/伤残代码" prop="customerNo" label-width="115px">
                                <el-input clearable v-model.trim="searchIllParams.xillcode" placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="伤病/伤残名称" prop="customerNo" label-width="115px">
                                <el-input clearable v-model.trim="searchIllParams.xillname" placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="拼音编码" prop="customerNo" label-width="115px">
                                <el-input clearable v-model.trim="searchIllParams.illpinyin" placeholder=""></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="选项" prop="flag04" label-width="115px">
                                <el-select v-model.trim="searchIllParams.flag04">
                                    <el-option key="" label="全部" value="">
                                    </el-option>
                                    <el-option key="shangbin" label="伤病" value="shangbin">
                                    </el-option>
                                    <el-option key="shangcan" label="伤残" value="shangcan">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          
                            <div class="searchBtnDiv">
                                <el-button type="primary" icon="el-icon-search" @click="getList"></el-button>
                                <el-button type="primary" plain icon="el-icon-refresh" @click="resetQueryIll"></el-button>
                            </div>
                        </el-col>
                        
                    </el-row>
                    <el-table v-loading="loading" :data="queryIlltableData" @row-dblclick="selectQueryIll"
                        style="width:100%">
                        <el-table-column max-width="120" property="illcode" label="查询号" align='center'>
                        </el-table-column>
                        <el-table-column max-width="120" property="xillcode" label="伤病代码" align='center'>
                        </el-table-column>
                        <el-table-column max-width="120" property="xillname" label="伤病名称" align='center' show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column max-width="120" property="illpinyin" label="拼音编码" align='center'>
                        </el-table-column>
                    </el-table>
                    <el-row>
                        <el-col :span="24">
                            <div class="pagination">
                                <el-pagination background v-if='paginations.total > 0' :page-sizes="paginations.pageSizes" :page-size="paginations.pageSize"
                                    :layout="paginations.layout" :total="paginations.total" :current-page='paginations.pageIndex'
                                    @current-change='handleCurrentChange' @size-change='handleSizeChange'>
                                </el-pagination>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                 <!--<el-button class="dangerbutton" @click="confirmChoose">确定</el-button>-->
                 <el-button @click="queryIllVisible = false">返回</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex'
    import constant from '@/utils/constant';
    import {queryIll,queryIllDisability,queryIllBySearch} from "@/api/customermanage/customerManage.js";
    export default {
        data() {
            return {
                loading:false,
                treeData: [],
                treeData_disability:[],
                defaultProps: {
                  children: 'children',
                  label: 'xillname'
                },
                queryIllVisible:false,
                searchIllParams:{
                    xillname:'',
                    xillcode:'',
                    illpinyin:'',
                    flag04:''
                },
                queryIlltableData:[],
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
            }

        },
        props: [],

        created() {
            
            this.initTree()
        },
        mounted() {
        },
        methods: {
            resetQueryIll(){
                this.searchIllParams.xillname="";
                this.searchIllParams.illpinyin="";
                this.searchIllParams.xillcode="";
                this.searchIllParams.flag04="";
            },
            clkDb(node,data) {
                console.log(node);
                console.log(data);
                if(data.children&&data.children.length>0){
                    return;
                }
//              this.xillData[this.xillDataIndex].xillname=data.xillname;
//              this.xillData[this.xillDataIndex].xillcode=data.xillcode;
//              this.xillData=JSON.parse(JSON.stringify(this.xillData));
                this.$emit("confirmXill",data)
            },
            goQueryIll(){
                
                this.searchIllParams={
                    xillname:'',
                    xillcode:'',
                    illpinyin:'',
                    flag04:''
                },
                this.queryIlltableData=[];
                this.queryIllVisible=true;
                
                this.paginations.pageIndex = 1;
                this.paginations.total = 0;
            },
            getList(){
                if(!this.searchIllParams.xillname&&!this.searchIllParams.xillcode&&!this.searchIllParams.illpinyin){
                        this.$message({
                            message: '前三项，请输入至少一个查询条件！',
                            type: 'error'
                        });
                        return
                }
                if(this.searchIllParams.xillcode.length>0&&this.searchIllParams.xillcode.length<3){
                        this.$message({
                            message: '请输入至少三位的伤病代码！',
                            type: 'error'
                        });
                        return
                }
                
                    
                let params = {
                    "xillname": this.searchIllParams.xillname,
                    "xillcode": this.searchIllParams.xillcode,
                    "illpinyin": this.searchIllParams.illpinyin,
                    "flag04": this.searchIllParams.flag04,
                    "pageSize": this.paginations.pageSize,
                    "pageNumber": this.paginations.pageIndex,
                };
                    this.$store.dispatch('loading/CHANGE_LOADING', true)
                    queryIllBySearch(params).then(res => {
                        if (res.resultCode == constant.SUCCESS) {
                            this.$store.dispatch('loading/CHANGE_LOADING', false)
                            this.queryIlltableData = res.data.list;
                            this.paginations.total = res.data.total;
                        }
                    }).catch(err => {
                        console.log(err)
                        this.$store.dispatch('loading/CHANGE_LOADING', false)
                    })
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
                this.paginations.pageSize = pageSize;
                this.getList();
            },
            // 上下分页
            handleCurrentChange(page) {
                this.paginations.pageIndex = page;
                this.getList();
            },
            // 根据条件查询列表
            subGetList() {
                this.paginations.pageIndex = 1;
                this.getList();
            },
            // 清除查询条件
            resetSearch() {
                this.searchParams.customerNo = '';
            },
            selectQueryIll(row){
                console.log(row);
                this.$emit("confirmXill",row);
                this.queryIllVisible=false;
            },
            initTree(row,index){
//              if(localStorage.getItem("xillTreeData")){
//                  this.treeData=JSON.parse(localStorage.getItem("xillTreeData"));
//              }
//              if(localStorage.getItem("xillTreeData_disability")){
//                  this.treeData_disability=JSON.parse(localStorage.getItem("xillTreeData_disability"));
//              }
                if(this.treeData.length==0){
                    
                    this.$store.dispatch('loading/CHANGE_LOADING', true)
                    queryIll().then(res => {
                        if (res.resultCode == constant.SUCCESS) {
                            this.$store.dispatch('loading/CHANGE_LOADING', false)
                            this.treeData = res.data;
//                          localStorage.setItem("xillTreeData",JSON.stringify(this.treeData));
                        }
                    }).catch(err => {
                        console.log(err)
                        this.$store.dispatch('loading/CHANGE_LOADING', false)
                    })
                }
                
                if(this.treeData_disability.length==0){
                    
//                  this.$store.dispatch('loading/CHANGE_LOADING', true)
                    queryIllDisability().then(res => {
                        if (res.resultCode == constant.SUCCESS) {
//                          this.$store.dispatch('loading/CHANGE_LOADING', false)
                            this.treeData_disability = res.data;
//                          localStorage.setItem("xillTreeData_disability",JSON.stringify(this.treeData_disability));
                        }
                    }).catch(err => {
                        console.log(err)
//                      this.$store.dispatch('loading/CHANGE_LOADING', false)
                    })
                }
            }
        },
        computed: {
            ...mapGetters(['tags']),
            reload() {
                return this.$store.state.loading.reload;
            }
        },
        activated() {
            if (this.reload) {
                this.$store.dispatch('loading/CHNAGE_RELOAD', false)
                Object.assign(this.$data, this.$options.data());
            }
        }
    }

</script>

<style lang="less" scoped>
    .fillcontain {
        padding-bottom: 0;
    }

    .contain {
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }

    .pagination {
        padding: 10px 20px;
        text-align: right;
    }

    .operationIcon {
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow: 0 0 3px #f9f9f9;
        .item i {
            color: #68a3fc;
        }
    }

    .search_container {
        padding: 20px 20px 0 20px;
    }
    .queryDiv{
        text-align: left;
        margin-bottom: 10px;
    }
    .searchBtnDiv{
        text-align: center;
        margin-bottom: 10px;
    }
</style>
<style>
    /*#selectXillComponent .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
        background-color: #f76767 !important;
    }
    #selectXillComponent .el-tree-node__content{
        height:18px !important;
    }
    #selectXillComponent .el-tree-node__content span{
        font-size:12px !important;
    }*/
    #selectXillComponent .el-tree{
        background: #fff !important;
    }
</style>